<template>
  <div class="fit">
     <van-dropdown-menu>
    
    <van-dropdown-item :title="zhobj[k]" :ref="k" v-for="v,k in fit" :key="k">
        <div class="it">
            <van-tag 
            style="margin:5px" 
            size="large" 
            :plain="i.sel?false:true" 
            type="primary" 
            v-for="i in v" 
            :key="i.code"
            @click="sel(k,i)"
            >{{i.name}}</van-tag>
        </div>
        <div style="padding: 5px 16px;">
        <van-button type="primary" block round @click="sure(k)">
            确认
        </van-button>       
        </div>
        <div style="padding: 5px 16px;">
        <van-button type="danger" block round @click="qux(k)">
            取消
        </van-button>       
        </div>
    </van-dropdown-item>
    </van-dropdown-menu>
  </div>
</template>

<script>
// charact: (...)
// floor: (...)
// orienteds: (...)
// price: (...)
// roomtype: 
// roomTypeID	否	string	户型id
// orientedID	否	string	朝向id
// floor	否	string	楼层
// tagsID	否	string	闪光点
// price
export default {
    data () {
        return {
            fit:{},// 筛选条件
            zhobj:{
               charact:"亮点",
               floor:"楼层",
               orienteds:"朝向",
               price:"价格",
               roomtype:"户型"
            },
            idobj:{// 参数id
               charact:"tagsID",
               floor:"floor",
               orienteds:"orientedID",
               price:"price",
               roomtype:"roomTypeID"
            },
            params:{}// 筛选参数
        }
    },
    methods: {
        sure(k){// 确认
          this.$refs[k][0].toggle();// 关闭弹框
        // console.log(this.$refs[k][0]);
        //    console.log(this.params);
           this.$emit("sure",this.params)
        },
        qux(k){// 取消 回到初始状态
          this.params={}
          this.getFit()// 
          this.$refs[k][0].toggle();// 关闭弹框
          this.$emit("qux",this.params)
        },

        getFit(){// 获取筛选条件
            this.$axios.getCondition()
            .then(res=>{
                console.log(res);
                if(res.data.code==200){
                    let data=res.data.msg
                    // 遍历 给每一条数据加上sel 是否高亮
                    for(let k in data){
                        data[k].forEach(i=>{
                            i.sel=0// 添加每一项的选中状态 初始值为0 
                        })
                    }
                    this.fit=data
                }
            })
        },
        sel(k,i){// 选择
            //  console.log(k);
            //  console.log(i);
            //  i.sel=1
             if(i.sel){// 未选中
                i.sel=0
                // 删除对应的参数的健
                delete this.params[this.idobj[k]]
             }else{// 选中状态
                this.fit[k].forEach(n=>{n.sel=0})
                i.sel=1
                // 组合参数
                // console.log(this.idobj[k]);// 键
                this.params[this.idobj[k]]=i.code// 添加参数
               
             }


            //   console.log(this.params);
        }
    },
    mounted () {
        this.getFit()
    }
}
</script>

<style>
   .it{
       box-sizing: border-box;
       padding: 20px;
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
   }
</style>